<template>
  <el-card
    class="munu"
    shadow="never"
  >
    <template #header>
      <span>{{ `常用功能` }}</span>
      <span
        style="cursor: pointer;"
        @click="handleEditTag"
      ><i class="el-icon-edit-outline" /></span>
    </template>
    <div>
      <el-row
        :gutter="40"
        class="panel-group"
      >
        <el-col
          v-for="(munu, index) in list"
          :key="index"
          :xs="12"
          :sm="12"
          :lg="2"
          style="width:10%"
        >
          <div
            class="card-panel"
            @click="goTask(munu)"
          >
            <div
              class="card-panel-icon-wrapper"
              :class="colorClass[index % 5]"
            >
              <svg-icon
                :icon-class="munu.meta.icon"
                class-name="card-panel-icon"
              />
            </div>
            <div class="card-panel-text">
              {{ $t(`route.${munu.meta.title}`) }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <select-tag
      :list="list"
      :visible.sync="selectTagVisible"
      @update-tag="updateTag"
    />
  </el-card>
</template>

<script>
import selectTag from '../components/menu_selectTag.vue'
import SystemConfigAPI from '@/api/system-config'

export default {
  name: 'Menu',
  components: {
    selectTag
  },
  data() {
    return {
      colorClass: [
        'icon-people',
        'icon-message',
        'icon-money',
        'icon-shopping',
        'icon-back'
      ],
      list: [],
      defaultTags: [
        {
          redirect: '',
          addStatus: {
            index1: null,
            index2: null,
            status: 'default'
          },
          meta: {
            icon: 'customers',
            title: 'customers'
          },
          path: 'customers',
          name: 'Customers'
        },
        {
          redirect: '',
          addStatus: {
            index1: null,
            index2: null,
            status: 'default'
          },
          meta: {
            icon: 'paperData',
            title: 'paperData'
          },
          path: 'paperData',
          name: 'PaperData'
        },
        {
          redirect: '',
          addStatus: {
            index1: null,
            index2: null,
            status: 'default'
          },
          meta: {
            icon: 'cartonOrder',
            title: 'cartonOrder'
          },
          path: 'cartonOrder',
          name: 'cartonOrder'
        },
        {
          redirect: '',
          addStatus: {
            index1: null,
            index2: null,
            status: 'default'
          },
          meta: {
            icon: 'cartonDelivery',
            title: 'cartonDelivery'
          },
          path: 'cartonDelivery',
          name: 'cartonDelivery'
        },
        {
          redirect: '',
          addStatus: {
            status: 'default'
          },
          meta: {
            icon: 'cartonReturn',
            title: 'cartonReturn'
          },
          path: 'cartonReturn',
          name: 'cartonReturn'
        },
        {
          redirect: '',
          addStatus: {
            index1: null,
            index2: null,
            status: 'default'
          },
          meta: {
            icon: 'receivableStatement',
            title: 'receivableStatement'
          },
          path: 'receivableStatement',
          name: 'receivableStatement'
        }
      ],
      permission: [],
      permissionList: [],
      permissionData: this.$store.state.permission.addRoutes,
      selectTagVisible: false
    }
  },
  computed: {
    fullList() {
      return this.$store.state.tagsView.visitedViews.filter(
        (item, index) => index !== 0
      )
    }
  },
  created() {
    this.getCommonFunctions()
  },
  methods: {
    goTask(munu) {
      this.$router.push({
        name: munu.name, query: { filter: munu.filter }
      })
    },
    handleEditTag() {
      this.selectTagVisible = true
    },
    updateTag(tags) {
      this.list = tags
    },
    async getCommonFunctions() {
      await SystemConfigAPI.getList('commonFunction').then(res => {
        if (res.code === 200) {
          let list = []
          list = res.data.pageItems
          if (list.length === 0) {
            this.repartTags()
          } else {
            list.map(item => {
              item.addStatus = {
                index1: item.index1,
                index2: item.index2,
                status: item.status
              }
              item.meta = {
                icon: item.icon,
                title: item.title
              }
              delete item.index1
              delete item.index2
              delete item.status
              delete item.icon
              delete item.title
            })
            this.list = list
          }
        }
      })
    },
    getAllTags() {
      const list = []; const tag = []
      this.permissionData.forEach((item, index) => {
        list[index] = item
        list[index].tags = []
        if (item.children) {
          item.children.forEach(child => {
            if (child.children) {
              child.children.forEach(sun => {
                if (sun.children) {
                  sun.children.forEach(son => list[index].tags.push(son))
                } else {
                  list[index].tags.push(sun)
                }
              })
            } else {
              list[index].tags.push(child)
            }
          })
        }
      })
      list.map(item => {
        if (this.hasChinese(this.$t(`route.${item.meta.title}`))) {
          tag.push(item)
        }
      })
      return tag
    },
    async repartTags() {
      const allTags = this.getAllTags()
      this.list = []
      allTags.forEach((munu, index1) => {
        munu.tags.map((tag, index2) => {
          if (this.defaultTags.some(item => this.$t(`route.${tag.meta.title}`) === this.$t(`route.${item.meta.title}`))) {
            const addTag = Object.assign({}, tag)
            addTag.addStatus = {
              status: 'add',
              index1: index1,
              index2: index2
            }
            this.list.push(addTag)
          }
        })
      })
    },
    hasChinese(str) {
      return /[\u4E00-\u9FA5]+/g.test(str)
    }
  }
}
</script>

<style lang="scss" scoped>
.munu {
  width: 100%;
  margin-bottom: 10px;
  & /deep/ .el-card__header {
    padding: 5px 10px;
  }
  & /deep/ .el-card__body {
    padding: 10px;
    background-color: #fff;
  }
  span {
    font-size: 15px;
    font-weight: 900;
  }
  .panel-group {
    margin-top: 5px;
    .card-panel {
      height: 100px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      text-align: center;
      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }
        .icon-people {
          background: #1571fa;
        }
        .icon-message {
          background: #ef609e;
        }
        .icon-money {
          background: #a14bf4;
        }
        .icon-shopping {
          background: #fd9c55;
        }
        .icon-back {
          background: #37c0ea;
        }
      }
      .icon-people {
        color: #1571fa;
      }
      .icon-message {
        color: #ef609e;
      }
      .icon-money {
        color: #a14bf4;
      }
      .icon-shopping {
        color: #fd9c55;
      }
      .icon-back {
        color: #37c0ea;
      }
      .card-panel-icon-wrapper {
        width: 75px;
        height: 65px;
        margin: auto;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }
      .card-panel-icon {
        width: 45px;
        height: 35px;
        float: left;
        font-size: 48px;
      }
      .card-panel-text {
        width: 100%;
        text-align: center;
        float: left;
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
      }
    }
  }
  .el-icon-edit-outline {
    margin-left: 10px;
  }
}
</style>
